<script setup>
import { ref } from 'vue'

const tooltip1 = ref(null)
const handleChange = visible => {
  console.log('change', visible)
}
</script>

<template>
  <div>
    <h1 class="row-title">普通引入</h1>
    <div class="row">
      <lee-toolTip content="Oh my god" placement="top" @change="handleChange">
        <lee-button type="primary">top</lee-button>
      </lee-toolTip>
      <lee-toolTip content="Oh my god" placement="bottom">
        <lee-button type="danger">bottom</lee-button></lee-toolTip
      >
      <lee-toolTip
        content="Oh my god"
        placement="top"
        trigger="click"
        @change="handleChange"
      >
        <lee-button type="danger">点击</lee-button>
      </lee-toolTip>
    </div>
    <h1 class="row-title">手动触发</h1>
    <div class="row">
      <lee-toolTip
        content="Oh my god"
        manual
        placement="left"
        @change="handleChange"
        ref="tooltip1"
      >
        <lee-button type="primary">手动触发</lee-button>
      </lee-toolTip>
    </div>
    <div class="row">
      <lee-button type="primary" @click="tooltip1?.show">打开</lee-button>
      <lee-button type="primary" @click="tooltip1?.hide">关闭</lee-button>
    </div>
    <h1 class="row-title">延时触发</h1>
    <div class="row">
      <lee-toolTip
        content="Oh my god"
        placement="top"
        @change="handleChange"
        :openDelay="2000"
        :closeDelay="2000"
      >
        <lee-button type="primary">top</lee-button>
      </lee-toolTip>
    </div>
  </div>
</template>

<style scoped></style>
